<template>
	<div class="backManagerLogin" :style="{'background-image':'url('+backGroundImg+')'}">
		<div class="bg_opac"></div>
		<div class="Header">
			<h3></h3>
		</div>
		<div class="loginBody backManager_login_input">
			<div class="login-top">{{ sysName }}</div>
			<el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
				<el-form-item>
					<el-autocomplete class="loginInput"
								v-model="loginForm.userName"
								:fetch-suggestions="querySearch"
								placeholder="请输入用户名" value-key="customer"
							>
								<i slot="prefix" class="el-input__icon el-icon-user"></i>
								<template slot="default" slot-scope="{item}">
									{{ item.customer}}
								</template>
							</el-autocomplete>
					<!-- <el-input v-model="loginForm.userName" placeholder="请输入用户名" class="loginInput">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
					</el-input> -->
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.password" autocomplete="off" show-password
							  placeholder="请输入密码" @keyup.enter.native="handleLogin" class="loginInput">
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-checkbox class="loginInput" v-model="loginForm.remember">记住用户</el-checkbox>
				</el-form-item>
				<div class="login-button" @click="handleLogin">登 录</div>
			</el-form>
		</div>
		<div class="footer">
			<p>{{ copyRight }}建议使用“Chrome / IE / 搜狗高速” 浏览器</p>
		</div>
	</div>
</template>

<script>
import {setStore} from "@/plugins/localStore";
import {Loading} from 'element-ui';

export default {
	name: 'Login',
	data() {
		return {
			copyRight: '',
			sysName: '',
			backGroundImg: require('@/assets/back_manage_img/login_bg.jpg'),
			loginForm: {
				userName: '',
				password: '',
				remember: false
			},
			loginList:[],
		}
	},
	mounted() {
		this.getSysInfo();
		this.getSysHeadImg();
		let loginList = sessionStorage.getItem('loginList');
		if(loginList) {
			this.loginList = JSON.parse(loginList)
		}
	},
	methods: {
		querySearch(a,cb){
			return new Promise((resolve, reject) => {
				const customers = this.loginList.map(item => ({
					customer: item.userAccount,
					value: item.userAccount,
				}));
				cb(customers);
				resolve(customers); // 将处理后的客户数据传递给 resolve 函数
			});
		},
		getSysInfo() {
			let self = this;
			self.$http({
				url: "/jinl/sysInfo/getSysInfoList",
				method: "post",
				params: {notToken: true}
			}).then(resp => {
				if (resp.success) {
					self.copyRight = resp.result.copyRight;
					self.sysName = resp.result.sysName;
				}
			});
		},
		getSysHeadImg() {
			let self = this;
			self.$http({
				url: "/jinl/file/queryFileList",
				method: "post",
				params: {type: '2', check: '1', notToken: true}
			}).then(resp => {
				if (resp.success) {
					if (resp.result.length > 0) {
						self.backGroundImg = resp.result[0].fileUrl;
					}

				}
			});
		},
		validateLogin() {
			if (!this.loginForm.userName || !this.loginForm.userName.trim()) {
				this.$notify({
					title: '提示',
					message: "请输入用户",
					type: 'warning'
				});
				return -1;
			}
			if (!this.loginForm.password) {
				this.$notify({
					title: '提示',
					message: "请输入密码",
					type: 'warning'
				});
				return -1;
			}
			return 1;
		},
		handleLogin() {
			let self = this;
			if (self.validateLogin() == -1) {
				return;
			}
			let param = {userAccount: self.loginForm.userName.trim(), password: self.loginForm.password,notToken:true};
			let loadingInstance = Loading.service({fullscreen: true});

			self.$http({
				url: "/jinl/login/doLogin",
				method: "post",
				params: param
			}).then(resp => {
				if (resp.success) {
					self.$store.dispatch('user/setLoginUserDetail', resp.result).then(res => {
						let count = 0;
						self.loginList.filter(item=>{
							if(item.userAccount == param.userAccount) {
								count = -1
							}
						})
						if(count == 0) {
							self.loginList.push({
								userAccount: self.loginForm.userName.trim(),
								password: self.loginForm.password,
							})
						}
						sessionStorage.setItem('loginList',JSON.stringify(self.loginList));
						setStore(resp.result);
						self.$router.push({name: 'back-firstPage'});

					});
					loadingInstance.close();
				} else {
					loadingInstance.close();
					self.$notify({
						title: '提示',
						message: resp.result.message,
						type: 'error'
					});
				}
			});
		}
	},
}
</script>

<style scoped lang="scss">
.backManagerLogin {
	background-image: url(../assets/back_manage_img/login_bg.jpg);
	height: 100%;
	background-size: 100% 100%;
	position: relative;
	@font-face {
		font-family: 'fonta';
		src: url(../style/fontFamily.ttf);
	}
	.bg_opac {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0, 0, 0, .3);
	}

	.Header {
		height: 60px;
		line-height: 60px;

		h3 {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			padding: 0 100px;
			font-weight: normal;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			span {
				font-size: 24px;
				font-weight: 400;
				color: #ffffff;
				font-family: 'fonta';
				margin-top: 6px;
				letter-spacing: 5px;
			}

			.logo_img {
				max-height: 40px;
				width: 160px;
			}
		}
	}

	.loginBody {
		width: 550px;
		margin: 0 auto;
		// height: 300px;
		background-color: rgba(49, 49, 49, .25);
		margin-top: calc(50vh - 250px);
		box-shadow: 0 0 20px #95dee7;
		padding: 20px 50px;
		border-radius: 10px;
		position: absolute;
		left: calc(50% - 275px);
		z-index: 1;

		.login-top {
			font-size: 24px;
			box-sizing: border-box;
			color: #ffffff;
			margin-bottom: 20px;
			letter-spacing: 5px;
			text-align: center;
		}

		.login-button {
			cursor: pointer;
			width: 80%;
			text-align: center;
			padding: 10px 0px;
			background-color: #00D1D0;
			margin: 0 auto;
			color: #ffffff;
			font-size: 14px;
			border-radius: 30px;

			&:active {
				opacity: 0.8;
			}
		}

		.el-form {
			padding: 0 30px;
		}
	}

	.footer {
		color: #ffffff;
		position: fixed;
		bottom: 0px;
		width: 100%;
		padding: 10px;

		p {
			text-align: center;
		}
	}
}
</style>
